<template>
    <div style="background: transparent;">
        <el-row>
            <img src="../../assets/logo/logo.png" style="position: absolute;left: 5px;top: 5px;z-index: 999;width: 8%;"
                alt="">
            <img src="../../assets/images/side-background.png"
                style="width: 33%;transform: rotateY(180deg);vertical-align: top;" alt="">
            <img src="../../assets/images/top-title.png" style="width: 33%;position: relative;left: -20px;" alt="">
            <img src="../../assets/images/side-background.png"
                style="width: 33%;position: relative;left: -40px;vertical-align: top;" alt="">
            <div class="time" style="position: absolute;top: 10px;right: 2%;">
                <span style="font-size: 20px;display: block;">{{ currentTime }}</span>
                <span style="font-size: 12px;">{{ currentDay }}</span>
            </div>
            <screenfull id="screenfull" class="right-menu-item hover-effect"
                style="position: absolute;right: 10px;top: 18%;color: #fff;font-size: 18px;" />
            <div style="position: absolute;z-index: 1000;width: 6%;top: 65%;right: 10px;height: 100%;text-align: center;cursor: pointer;"
                @click="goToBack">
                <svg-icon icon-class="button-back" style="width: 100%;height: 50%;"></svg-icon>
                <span style="color: #58cdff;size: 14px;position: relative;top: -35%;cursor: pointer;">数据分析</span>
            </div>
        </el-row>
    </div>
</template>

<script>
import { parseTime } from '../../utils/ruoyi'
import Screenfull from '@/components/Screenfull'
export default {
    name: 'ScreenTitle',
    components: { Screenfull },
    data() {
        return {
            currentDay: '',
            currentTime: '',
            intervalId: '',
        };
    },
    created() {
        this.updateTime();
        this.intervalId = setInterval(this.updateTime, 1000);//设置时间每秒更新
    },
    beforeUnmount() {
        clearInterval(this.intervalId);
    },
    methods: {
        updateTime() {
            var currentTime = parseTime(new Date());
            this.currentDay = currentTime.split(" ")[0];
            this.currentTime = currentTime.split(" ")[1];
        },
        goToBack() {
            this.$router.push({ path: '/deviceScreen/screen' });
        },
    }
};
</script>

<style scoped>
.time {
    width: 100px;
    line-height: 18px;
    color: #BACBE9 !important;
    font-size: 14px !important;
    font-weight: 700;
    word-break: break-all;
    text-align: center;
}
</style>